<template>
	<el-radio-group class="show_mode_wrapper" :style="{ '--btnSize': size + 'px' }" v-model="showMode">
		<el-radio-button label="1"><svg-icon icon-name="list-block" :size="svgSize" /></el-radio-button>
		<el-radio-button label="2"><svg-icon icon-name="list-table" :size="svgSize" /></el-radio-button>
	</el-radio-group>
</template>

<script>
export default {
	name: 'showMode',
	props: {
		value: { type: String, default: '1' },
		size: { type: String, default: '24' }
	},
	data() {
		return {
			showMode: this.value
		};
	},
	computed: {
		svgSize() {
			return Math.round(this.size * 0.5);
		}
	},
	watch: {
		value(val) {
			this.showMode = val;
		},
		showMode(val) {
			this.$emit('input', val);
		}
	}
};
</script>

<style lang="scss" scoped>
.show_mode_wrapper::v-deep {
	.el-radio-button__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--btnSize);
		height: var(--btnSize);
		padding: 0;
		font-size: 0;
		border-radius: 0;
		box-sizing: border-box;
		fill: #303133;
	}
	.is-active .el-radio-button__inner {
		fill: #fff;
	}
}
</style>
